<script setup lang="ts">
import { computed, reactive } from 'vue';

import { getResult } from '../../../tools';

const formState: any = defineModel();

const asetAllConfigs = reactive<any>({
  selectList: (() => {
    // eslint-disable-next-line unicorn/prefer-structured-clone
    const copyJson = JSON.parse(
      JSON.stringify(formState.value.specInfo.specValues),
    );
    return copyJson;
  })(),
  // 价格
  price: null,
  // 库存
  stockNum: null,
  // 商家编码
  code: '',
  // SKU状态
  skuStatus: true,
});
const columns = computed(setTabelColumns);
const spaceData = computed(() => formState.value.specPricesV2);
function setTabelColumns() {
  const poteriNter = formState.value.specInfo.specValues.map(
    (item: any, index: number) => {
      return {
        title: item.propertyName || item.sellPropertyName,
        dataIndex: index,
        key: index,
        width: 180,
      };
    },
  );
  // console.log('poteriNter', poteriNter);
  // console.log('spaceData', formState.value.specPricesV2);
  // formState.value.specPricesV2 = [...formState.value.specPricesV2].map(
  //   (item: any) => {
  //     item.sellProperties.forEach((item2: any, index: number) => {
  //       item2.propertyName = poteriNter[index].title;
  //     });
  //     return item;
  //   },
  // );
  // eslint-disable-next-line unicorn/prefer-structured-clone
  const copyJson = JSON.parse(
    JSON.stringify(formState.value.specInfo.specValues),
  );
  asetAllConfigs.selectList = copyJson;
  const infoConter = [
    {
      title: '供货价',
      dataIndex: 'supplyPrice',
      key: 'supplyPrice',
      width: 110,
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      width: 230,
    },
    {
      title: '库存',
      dataIndex: 'stockNum',
      key: 'stockNum',
      width: 230,
    },
    // {
    //   title: '商家编码',
    //   dataIndex: 'code',
    //   key: 'code',
    //   width: 230,
    // },
    {
      title: 'SKU状态',
      dataIndex: 'status',
      key: 'status',
      width: 160,
    },
  ];
  poteriNter.push(...infoConter);

  return poteriNter;
}

function setInSelectData() {
  // eslint-disable-next-line unicorn/prefer-structured-clone
  const SetNewDatas = JSON.parse(JSON.stringify(formState.value.specPricesV2));
  const getSelectIds = asetAllConfigs.selectList.map((item: any) => {
    return item.valueData;
  });
  const resultData = getResult(getSelectIds);
  resultData.forEach((item: string[]) => {
    const sortData = item.sort().join('-');
    SetNewDatas.forEach((itemData: any) => {
      const sortSukudata = itemData.sellProperties
        .map((ids: any) => ids.id)
        .sort()
        .join('-');
      if (sortData === sortSukudata) {
        if (asetAllConfigs.price) {
          itemData.price = asetAllConfigs.price;
        }
        if (asetAllConfigs.stockNum) {
          itemData.stockNum = asetAllConfigs.stockNum;
        }
        if (asetAllConfigs.code) {
          itemData.code = asetAllConfigs.code;
        }
        itemData.skuStatus = asetAllConfigs.skuStatus;
      }
    });
  });
  formState.value.specPricesV2 = SetNewDatas;
}
const priceSetState = reactive({
  bei: null,
  jia: null,
  guding: null,
  selectType: '1',
});
function isselectContent() {
  if (priceSetState.selectType === '1' && priceSetState.bei) {
    if (Number.isNaN(priceSetState.bei * 1)) return;
    // eslint-disable-next-line unicorn/prefer-structured-clone
    const SetNewDatas = JSON.parse(
      JSON.stringify(formState.value.specPricesV2),
    );
    SetNewDatas.forEach((item: any) => {
      item.price = item.supplyPrice * (priceSetState.bei || 1);
      if (priceSetState.jia && !Number.isNaN(priceSetState.jia * 1)) {
        item.price = item.price + priceSetState.jia;
      }
      item.price = item.price.toFixed(2);
    });

    formState.value.specPricesV2 = SetNewDatas;
  }
  if (priceSetState.selectType === '2' && priceSetState.guding) {
    if (Number.isNaN(priceSetState.guding * 1)) return;
    // eslint-disable-next-line unicorn/prefer-structured-clone
    const SetNewDatas = JSON.parse(
      JSON.stringify(formState.value.specPricesV2),
    );
    SetNewDatas.forEach((item: any) => {
      item.price = priceSetState.guding;
    });
    formState.value.specPricesV2 = SetNewDatas;
  }
}
</script>

<template>
  <div>
    <a-table
      :animate-rows="false"
      :columns="columns"
      :data-source="spaceData"
      :pagination="false"
      :row-height="50"
      :scroll="{ y: 600 }"
      bordered
    >
      <template #title>
        <a-space wrap>
          <template
            v-for="(items, _index) in asetAllConfigs.selectList"
            :key="_index"
          >
            <a-select
              v-model:value="items.valueData"
              :field-names="{
                label: 'valueName',
                value: 'id',
              }"
              :options="items.values"
              :placeholder="`请选择${items.sellPropertyName}`"
              mode="multiple"
              style="width: 160px"
            />
          </template>
          <a-input
            v-model:value="asetAllConfigs.price"
            placeholder="请输入价格"
          />
          <a-input
            v-model:value="asetAllConfigs.stockNum"
            placeholder="请输入库存"
          />
          <!-- <a-input
            v-model:value="asetAllConfigs.code"
            placeholder="请输入商家编码"
          /> -->
          <a-space :size="1">
            上架状态<a-switch v-model:checked="asetAllConfigs.skuStatus" />
          </a-space>

          <a-button
            :disabled="
              !asetAllConfigs.selectList.every(
                (item: any) => !item.valueData || item.valueData.length > 0,
              )
            "
            type="primary"
            @click="setInSelectData"
          >
            批量设置
          </a-button>
        </a-space>
      </template>
      <template #headerCell="{ column }">
        <template v-if="column.key === 'price'">
          <div>
            <span class="text-orange-600"> * </span>
            <span> 价格 </span>
            <a-popover trigger="click">
              <template #content>
                <a-radio-group v-model:value="priceSetState.selectType">
                  <a-space align="start" direction="vertical">
                    <a-space>
                      <a-radio value="1">供货价格 X</a-radio>
                      <a-space>
                        <a-input-number
                          v-model:value="priceSetState.bei"
                          :disabled="priceSetState.selectType !== '1'"
                          placeholder="倍"
                        />
                        <span>倍</span>
                        <span>+</span>
                        <a-input-number
                          v-model:value="priceSetState.jia"
                          :disabled="priceSetState.selectType !== '1'"
                          placeholder="元"
                        />
                        <span>元</span>
                      </a-space>
                    </a-space>

                    <a-space>
                      <a-radio value="2"><span>固定价格 </span></a-radio>
                      <a-input-number
                        v-model:value="priceSetState.guding"
                        :disabled="priceSetState.selectType !== '2'"
                        placeholder="请输入固定价格"
                        style="width: 200px"
                      />
                    </a-space>
                    <a-button
                      class="ml-16"
                      type="primary"
                      @click="isselectContent"
                    >
                      确定
                    </a-button>
                  </a-space>
                </a-radio-group>
              </template>
              <a-button type="link">批量设置</a-button>
            </a-popover>
          </div>
        </template>
      </template>
      <template #bodyCell="{ record, column }">
        <template v-if="column.key === 0">
          {{ record.sellProperties?.[0]?.valueName
          }}{{
            record.sellProperties?.[0]?.remark &&
            `(${record.sellProperties[0].remark})`
          }}
        </template>
        <template v-if="column.key === 1">
          {{ record.sellProperties?.[1]?.valueName
          }}{{
            record.sellProperties?.[1]?.remark &&
            `(${record.sellProperties[1].remark})`
          }}
        </template>
        <template v-if="column.key === 2">
          {{ record.sellProperties?.[2]?.valueName
          }}{{
            record.sellProperties?.[2]?.remark &&
            `(${record.sellProperties[2].remark})`
          }}
        </template>
        <template v-if="column.key === 3">
          {{ record.sellProperties?.[3]?.valueName
          }}{{
            record.sellProperties?.[3]?.remark &&
            `(${record.sellProperties[3].remark})`
          }}
        </template>
        <template v-if="column.key === 4">
          {{ record.sellProperties?.[4]?.valueName
          }}{{
            record.sellProperties?.[4]?.remark &&
            `(${record.sellProperties[4].remark})`
          }}
        </template>
        <template v-if="column.key === 5">
          {{ record.sellProperties?.[5]?.valueName
          }}{{
            record.sellProperties?.[5]?.remark &&
            `(${record.sellProperties[5].remark})`
          }}
        </template>
        <template v-if="column.key === 'supplyPrice'">
          {{ record.supplyPrice }}
        </template>
        <template v-if="column.key === 'price'">
          <a-input-number
            v-model:value="record.price"
            :min="0.01"
            class="w-40"
          />
        </template>
        <template v-if="column.key === 'stockNum'">
          <a-input-number
            v-model:value="record.stockNum"
            :min="0"
            class="w-40"
          />
          <div>来源库存：{{ record.stockNum1688 }}</div>
        </template>
        <template v-if="column.key === 'code'">
          <a-input v-model:value="record.code" class="w-40" />
        </template>
        <template v-if="column.key === 'status'">
          <a-space :size="2">
            <div>{{ record.skuStatus ? '已上架' : '已下架' }}</div>
            <a-switch v-model:checked="record.skuStatus" />
          </a-space>
        </template>
      </template>
    </a-table>
    <!-- {{ formState.specPricesV2 }} -->
  </div>
</template>
